/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { PureComponent } from 'react';
import {
  Platform,
} from 'react-native';
import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import {StatusBar} from 'react-native';
import {screen} from './js/common';
import TabBarItem from './js/widget/TabBarItem';
import color from './js/widget/color';
import WelcomeScreen from './js/WelcomeScreen';
import LoginScreen from './js/LoginScreen';
import MainScreen from './js/MainScreen';
import WorkScreen from './js/work/WorkScreen';
import MessageScreen from './js/message/MessageScreen';
import WorkBookScreen from './js/workerbook/WorkerBookScreen';
import MineScreen from './js/my/MineScreen';
import ForgetPasswordScreen from './js/ForgetPasswordScreen';
import RegistScreen from './js/RegistScreen';
import ChangeGroupScreen from './js/work/ChangeGroupScreen';
import HourTallyScreen from './js/work/HourTallyScreen';

const lightContentScene=['Work','Mine'];

const topBarStyle={
  elevation:0,
  height:40
};

const headerTitleStyle={
  alignSelf:'center',
  fontSize:18
}

function getCurrentRouteName(navigationState){
  if(!navigationState){
    return null;
  }
  const route=navigationState.routes[navigationState.index];
  if(route.routes){
   return getCurrentRouteName(route);
  }
  return route.routeName;
}

export default class App extends PureComponent{
    constructor(){
      super()
      StatusBar.setBarStyle('light-content');
      this.state={
        topBarTitle:'工作'
      }
    }

    render(){
      return(
        <Navigator
           onNavigationStateChange={
              (prevState,currentState)=>{
                const previousScene=getCurrentRouteName(prevState);
                const currentScene=getCurrentRouteName(currentState);
                if(previousScene!==currentScene){
                    if(lightContentScene.indexOf(currentScene)>=0){
                      StatusBar.setBarStyle('light-content');
                    }else{
                      StatusBar.setBarStyle('dark-content');
                    }
                }
              }
           }
        />
      );
    }
}


const Tab=TabNavigator({
  Work:{
    screen:WorkScreen,
    navigationOptions:({navigation})=>({
         headerTitle:'工作',
         //header为null可以隐藏标题栏
        //  header:null,
        
         tabBarLabel:'工作',
         tabBarIcon:({focused,tintColor})=>(
            <TabBarItem
            tintColor={tintColor}
            focused={focused}
            selectedImage={require('./image/iocn_work_selected.png')}
            normalImage={require('./image/iocn_work.png')}
            />
         )
    }),
    },
   Message:{
      screen:MessageScreen,
      navigationOptions:({navigation})=>({
        headerTitle:'消息',
         tabBarLabel:'消息',
        //  header:null,
         tabBarIcon:({focused,tintColor})=>(
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            selectedImage={require('./image/icon_message_selected.png')}
            normalImage={require('./image/icon_message.png')}
         />
         )
      }),
   },
   WorkBook:{
     screen:WorkBookScreen,
      navigationOptions:({navigation})=>({
        headerTitle:'工友录',
         tabBarLabel:'工友录',
        //  header:null,
         tabBarIcon:({focused,tintColor})=>(
           <TabBarItem 
            tintColor={tintColor}
            focused={focused}
            selectedImage={require('./image/icon_contacts_selected.png')}
            normalImage={require('./image/icon_contacts.png')}
           />
         )
      })
   },
   Mine:{
     screen:MineScreen,
     navigationOptions:({navigation})=>({
       headerTitle:'我的',
       tabBarLabel:'我的',
      //  header:null,
       tabBarIcon:({focused,tintColor})=>(
         <TabBarItem
           tintColor={tintColor}
           focused={focused}
           selectedImage={require('./image/icon_mine_selected.png')}
           normalImage={require('./image/icon_mine.png')}
         />
       )
     }) 
   },
},
 {
   tabBarComponent:TabBarBottom,
   tabBarPosition:'bottom',
   swipeEnabled:false,
   animationEnabled:true,
   lazy:true,
   tabBarOptions:{
       activeTintColor: color.theme,
       inactiveTintColor:'#979797',
       activeBackgroundColor:'#ffffff',
       inactiveBackgroundColor:'#ffffff',
       style:{
        backgroundColor:'#ffffff',
      },
      indicatorStyle:{
        height:0,
     },
     labelStyle:{
       marginBottom:10
     },
     iconStyle:{
       marginTop:10
     }
    },
 }
);

 const Navigator=StackNavigator( 
  {
      Welcome:{screen:WelcomeScreen},
      Tab:{
        screen:Tab,
        navigationOptions:{
          // headerTitle:'工作'
          headerLeft:null,
          headerStyle:topBarStyle,
          headerTitleStyle:headerTitleStyle,
        }  
        },
      Login:{screen:LoginScreen,
         navigationOptions:{
            header:null
         }
      },
      Main:{screen:MainScreen},
      Forget:{
        screen:ForgetPasswordScreen,
        navigationOptions:{
          headerStyle:topBarStyle,
          headerTitleStyle:headerTitleStyle,
        }
      },
      Regist:{
        screen:RegistScreen,
        navigationOptions:{
          headerStyle:topBarStyle,
          headerTitleStyle:headerTitleStyle,
        }
      },
      ChangeGroup:{
        screen:ChangeGroupScreen,
        navigationOptions:{
          headerStyle:topBarStyle,
          headerTitleStyle:headerTitleStyle,
        }
      },
      HourTally:{
        screen:HourTallyScreen,
        navigationOptions:{
          headerStyle:topBarStyle,
          headerTitleStyle:headerTitleStyle,
        }
      },
  },
  {
     navigationOptions:{
       headerBackTitle:null,
       headerTintColor:'#333333',
       showIcon:true,
       swipeEnabled:false,
       animationEnabled:false,
     },
     mode:'card',
     initialRouteName:'Login',
     onTransitionStart:()=>{console.log('导航栏切换开始')},
     onTransitionEnd:()=>{console.log('导航栏切换结束')},
  }
);

module.exports=App;
